<template>
    <div>
        <!-- 面包屑 -->
        <bread-view>
            <bread-item :to="'/'">首页</bread-item>
            <bread-item :to="`/cate?id=${breadobj.onecateid}`">{{breadobj.onecatename}}</bread-item>
            <bread-item>{{breadobj.twocatename}}</bread-item>
        </bread-view>
        <!-- 属性展示区 -->
        <div class="sub-filter">
            <div class="item">
                <div class="head">品牌：</div>
                <div class="body">
                    <a href="javascript:;" :class="{active:item.id==null}" v-for="item in brandattr" :key="item.id">{{item.name}}</a>
                </div>
            </div>
            <div class="item" v-for="item in attr" :key="item.id">
                <div class="head">{{item.name}}</div>
                <div class="body">
                    <a href="javascript:;" v-for="it in item.properties" :key="it.id" :class="{active:it.id==null}">{{it.name}}</a>
                </div>
            </div>
        </div>
        <!-- 排序展示区 -->
        <div class="paixu">
            <input type="radio">
            <input type="radio">
            <input type="radio">
            <input type="radio">
            <input type="radio">
            <div>
                <CheckBox :val.sync="inenyory" :title="'have'">仅显示有货的商品</CheckBox>
                <CheckBox :val.sync="onlyDiscount" :title="'cheap'">仅显示特惠的商品</CheckBox>
            </div>
        </div>
        <!-- 结果展示区 -->
       
        <div class="goodsdata">
            <goods-item v-for="item in goodslist" :key="item.id" :info="item"></goods-item>
        </div>
        <!-- 监控加载盒子 -->
        <infineteLoading @getdata="getData" :loading="loading" :finished="finished"></infineteLoading>
    </div>
</template>
<script>
import BreadItem from '../utils/Bread/BreadItem.vue'
import BreadView from '../utils/Bread/BreadView.vue'
import {cateFilter} from '@/utils/api/categoryapi'
import CheckBox from "@/components/utils/CheckBox.vue"
import {getGoods} from "@/utils/api/cateapi"
import InfineteLoading from "@/components/utils/InfineteLoading.vue"
import goodsItem from "@/components/utils/goodsItem.vue"
export default {
    components: { BreadView, BreadItem,CheckBox,goodsItem,InfineteLoading },
    data(){
        return{
            // 面包屑
            breadobj:{
                twocatename:null,
                onecatename:null,
                onecateid:null,
            },
            brandattr:[],//选择品牌
            attr:[],//属性
            inenyory:false,//是否有库存
            onlyDiscount:false,//特惠
            loading:true,//正在加载中
            finished:false,//是否加载完成
            query:{
                categoryId:null,
                page:1,
                pageSize:20
            },
            goodslist:[]
        }
    },
    computed:{
        cate(){
            return this.$store.state.category.cate
        }
    },
    watch:{
        "$route":{
            handler(val){
                if(val){
                    this.setBread()
                    this.getAttr(this.$route.query.id)
                }   
            },
            deep:true,
            immediate:true
        }
    },
    mounted(){
        // 给query渎职
        this.query.categoryId=this.$route.query.id
        // 调用属性获取的方法
        this.getData()
    },
    methods:{
        // 面包屑方法
        setBread(){
            for(var i=0;i<=this.cate.length-1;i++){
                var index=this.cate[i].children.findIndex(item=>{
                    return item.id==this.$route.query.id
                })
                if(index!=-1){
                    this.breadobj.twocatename=this.cate[i].children[index].name
                    this.breadobj.onecatename=this.cate[i].name
                    this.breadobj.onecateid=this.cate[i].id
                    break;
                }
            }
        },
        // 筛选区数据
        async getAttr(id){
            let res=await cateFilter(id)
            this.brandattr=res.result.brands
            // 需要给brandattr在头部添加一个全部的空数据
            var obj={id:null,name:'全部'}
            this.brandattr.unshift(obj)
            this.attr=res.result.saleProperties
            this.attr.forEach(item=>{
                item.properties.unshift(obj)
            })
        },
        // 获取数据
        async getData(){
            this.loading=true
           let res=await getGoods(this.query)
           if(res.result&&res.result.items.length!=0){
            this.goodslist=[...this.goodslist,...res.result.items]
            // 加页码
            this.query.page+=1
           }else{
            // 没得到数据   已经完成
            this.finished=true
           }
        //    this.loading=false
        }
    }
}
</script>

<style scoped lang="scss">
@import '@/assets/css/variables.scss';
// 筛选区
.sub-filter {
    background: #fff;
    padding: 25px;
    .item {
      display: flex;
      line-height: 40px;
      .head {
        width: 80px;
        color: #999;
      }
      .body {
        flex: 1;
        a {
          margin-right: 36px;
          transition: all .3s;
          display: inline-block;  
          &.active,
          &:hover {
            color: $xtxColor;
          }
        }
      }
    }
  }
  .active{
    color: $xtxColor;
  }
  .paixu{
    
    width: 1240px;
    height: 80px;
    background: white;
    margin: auto;
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0px 20px;
  }
  .goodsdata{
    background: white;
    // width: 1240px;
    // height: 100%;
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
  }
</style>